<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="/css/myblog.css">
    <title>后台管理</title>
    <link rel="icon" href="/images/icon.png">


</head>
<body id="body">
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary menu stackable">
                <h2 class="ui teal header item">远行者log管理后台</h2>
                <a href="/admin/blogs" class="m-item active item m-mobile-hide"><i class="home icon"></i>博客</a>
                <a href="/admin/types" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="/admin/tags" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                <a href="/admin/comments" class="m-item item m-mobile-hide"><i class="comment icon"></i>评论管理</a>
                <div class="right menu">
                    <div class="ui dropdown item m-item m-mobile-hide">
                        <img src="/images/头像.jpg" class="ui avatar image">
                        &nbsp;&nbsp;杨洋
                        <i class="dropdown icon"></i>
                        <div class="menu ">
                            <a class="item " href="/user/logout">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a id="b1" href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <!--二级导航-->
    <div class="ui menu attached inverted ">
        <div class="ui container" >
            <a href="/admin/blog-input" class="item" >发布</a>
            <a href="/admin/blogs" class="active item">列表</a>
        </div>
    </div>
    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <div  class="ui form segment inverted" >
                <div class="fields inline">
                    <div class="field">
                        <input type="text" name="title" placeholder="标题">
                    </div>
                    <input type="hidden" name="begin" value="0">
                    <input type="hidden" name="size" value="6">
                    <div class="field">
                        <div class="ui selection dropdown">
                            <input type="hidden" name="type" >
                            <i class="ui dropdown icon"></i>
                            <div class="default text">分类</div>
                            <div class="menu" >
                                <div class="item" th:each="type,iterStat:${types}" th:data-value="${type.getId()}"  th:text="${type.getName()}"></div>
                            </div>
                        </div>
                    </div>

                    <div class="field right aligned">
                        <button class="ui small teal basic button" onclick="initialization()"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>
            <div id="table-container">
                <table th:fragment="table_refresh" th:id="id_table_refresh"  class="ui table inverted celled center aligned">
                    <thread>
                        <tr>
                            <th></th>
                            <th>标题</th>
                            <th>分类</th>
                            <th>更新时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thread>
                    <tbody  >
                    <tr th:each="blog,iter:${blogs}">
                        <td th:text="(${iter.index}+1)">1</td>
                        <td th:text="${blog.getTitle()}">【一年总结】记我的大一生活</td>
                        <td th:text="${blog.getType().getName()}">一年总结</td>
                        <td th:text="${#dates.format(blog.getDate(),'yyyy-MM-dd')}">2020-7-04 15:12</td>
                        <td th:text="${blog.getState()==0}?'草稿':'已发布'">草稿</td>
                        <td>
                            <a class="ui button  teal basic mini " th:href="@{'/admin/blog-input/'+${blog.getId()}}" >编辑</a>
                            <button class="ui button  red basic mini " th:attr="data-id=${blog.getId()}" onclick="deleteBlog(this)">删除</button>

                        </td>

                    </tr>


                    </tbody>
                    <tfoot>
                    <tr >
                        <th colspan="6">
                            <div class="ui pagination menu mini">
                                <a onclick="pre()"  class="ui item ">上一页</a>
                                <a onclick="next()" class="ui item ">下一页</a>
                            </div>
                            <a href="/admin/blog-input" class="ui mini right floated teal basic button">新增</a>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <div class="ui divider "></div>
    <!--底部footer-->
    <footer class="ui inverted vertical segment m-opacity-tiny">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="two wide column ">
                    <h4 class="ui inverted header item m-text-thin m-text-spaced m-opacity-mini" >微信联系我</h4>
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="/images/QRcode.png" class="ui rounded image item" style="width: 100px">
                        </div>
                    </div>

                </div>
                <div class="five wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                    <div class="ui inverted link list">
                        <a class="item m-text-lined" th:each="newBlog,iter:${newBlogs}" th:href="@{'/page_blog/'+${newBlog.getId()}}" th:text="${newBlog.getTitle()}">博客1</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                    <div class="ui inverted link list">
                        <p class="item m-text-lined" href="#">QQ:1079325857</p>
                        <p class="item m-text-lined" href="#">email:yangyangpm@aliyun.com</p>
                        <a class="item m-text-lined" href="https://blog.csdn.net/weixin_55669208?spm=1000.2115.3001.5343">CSDN博客</a>
                    </div>
                </div>
                <div class="six wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">工具栏</h4>
                    <a class="item m-text-lined" href="https://ai.xiabb.chat">AI【对话】【写作】【绘图】</a>
                    <p class="item m-text-lined" href="#">AI账号:yangyangpm@aliyun.com</p>
                    <p class="item m-text-lined" href="#">AI密码:yangjingyuanonline</p>
                    <p class="item m-text-lined" href="#">密码每周星期一更新,如失效,请联系我</p>
                </div>
            </div>
            <div class="ui divider "></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny m-text-lined">版权 © 2023 杨洋 </p>
            <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备 2023036698 号</a>
        </div>
    </footer>


    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/Semantic-UI-CSS-master/semantic.min.js"></script>
    <script  type="text/javascript">

        $("#b1").click(function (){
            $(".m-item").toggleClass("m-mobile-hide");
        });



        $('.ui.dropdown').dropdown({
            on: 'hover'
        })


        var currentPage=1;
        var size=6;
        var begin=0;

        function initialization() {
            begin=0;
            loadData();
        }
        function next() {
            currentPage++;
            begin+=size;
            loadData();
        }
        function pre() {
            if (begin>0){
                begin-=size;
                loadData();
            }
        }
        function loadData(){
            $.ajax({
                url:"/blogCombination_blogs",
                data:{"begin":begin,"size":size,title:$("[name='title']").val(),type: $("[name='type']").val(),},
                type:"get",
                success:function (result) {
                    $("#table-container").html(result);
                }
            })
        }

        function deleteBlog(button) {
            $.ajax({
                url: "/blog",
                data:{"id":$(button).attr("data-id")},
                type:"delete",
                success:function(result){
                    $("body").html(result);
                }
            })
        }



    </script>

</body>
</html>